import React, { useEffect, useMemo, useState } from 'react';
import { Col, Form, Row, Select } from 'antd';
import { isEmpty } from 'lodash';

import InfoFormItem from '@/components/InfoFormItem';
import CardSecondLevel from '@/components/CardSecondLevel';
import { INFO_FORM_LAYOUT } from '@/utils/const';
import DataCard from '@/components/DataCard';
import { formatPercent, transformStorage } from '@/utils/format';

const { Option } = Select;

interface SubPlatformProps {
  loading: boolean;
  data: any;
  downstatsList: any[];
  onChangeDownstats: (value: string) => void;
}

const SubPlatform = (props: SubPlatformProps) => {
  const { loading, data = {}, downstatsList, onChangeDownstats } = props;
  const [downstatsValue, setdDownstatsValue] = useState<string>('');

  const {
    sdk_devices,
    sdk_online_devices,
    cig_channels,
    cig_online_channels,
    cigs,
    online_cigs,
    down_platforms,
    online_down_platforms,
    sdk_uplinks,
    cig_uplinks,
    down_platform_uplinks,
    uplinks,
    videos,
    pictures,
    used_storage = 0,
    total_storage = 0,
    gpu_perf_max,
    gpu_perf,
  } = data;

  // 转换一下
  const used_storage_unix = useMemo(() => {
    return transformStorage(used_storage);
  }, [used_storage]);
  const total_storage_unix = useMemo(() => {
    return transformStorage(total_storage);
  }, [total_storage]);

  const percents = useMemo(() => {
    try {
      const sdk_devices_percent = formatPercent(
        sdk_online_devices,
        sdk_devices,
      );
      const cig_channels_percent = formatPercent(
        cig_online_channels,
        cig_channels,
      );
      const cigs_percent = formatPercent(online_cigs, cigs);
      const down_platforms_percent = formatPercent(
        online_down_platforms,
        down_platforms,
      );
      return [
        sdk_devices_percent,
        cig_channels_percent,
        cigs_percent,
        down_platforms_percent,
      ];
    } catch {
      return [0, 0, 0, 0];
    }
  }, [data]);

  // 设备接入信息
  const devicesAccess = [
    {
      label: '新建接入',
      value: (
        <>
          {' '}
          <span>
            {sdk_online_devices}/{sdk_devices} 路
          </span>
          <span>{percents[0]}%</span>
        </>
      ),
    },
    {
      label: '社会资源整合接入通道数',
      value: (
        <>
          {' '}
          <span>
            {cig_online_channels}/{cig_channels} 路
          </span>
          <span>{percents[1]}%</span>
        </>
      ),
    },
    {
      label: '社会资源整合网关数',
      value: (
        <>
          {' '}
          <span>
            {online_cigs}/{cigs} 个
          </span>
          <span>{percents[2]}%</span>
        </>
      ),
    },
    {
      label: '外部系统对接（国标接入）',
      value: (
        <>
          {' '}
          <span>
            {online_down_platforms}/{down_platforms} 路
          </span>
          <span>{percents[3]}%</span>
        </>
      ),
    },
  ];

  const localToClouds = [
    {
      label: '新建接入链路数',
      value: `${sdk_uplinks} 条`,
    },
    {
      label: '社会资源整合链路数',
      value: `${cig_uplinks} 条`,
    },
    {
      label: '外部系统对接链路数',
      value: `${down_platform_uplinks} 条`,
    },
    {
      label: '链路总数',
      value: `${uplinks} 条`,
    },
    {
      label: '视频路数',
      value: `${videos} 路`,
    },
    {
      label: '图片数量',
      value: `${pictures} 张`,
    },
  ];

  const clouds = [
    {
      label: '存储已用/总计',
      value: `${used_storage_unix}/${total_storage_unix} PB`,
    },
    {
      label: 'GPU已用/上限',
      value: `${gpu_perf}/${gpu_perf_max} qps`,
    },
  ];
  const onChange = (value: string) => {
    setdDownstatsValue(value);
    onChangeDownstats(value);
  };

  const title = (
    <>
      区县级平台
      <Select
        style={{ width: 200, marginLeft: 20 }}
        value={downstatsValue}
        onChange={onChange}
      >
        {downstatsList.map(item => (
          <Option value={item.name} key={item.name}>
            {item.name}
          </Option>
        ))}
      </Select>
    </>
  );

  useEffect(() => {
    if (!isEmpty(downstatsList)) {
      setdDownstatsValue(downstatsList[0].name);
    }
  }, [downstatsList]);

  return (
    <>
      <DataCard title={title} style={{ padding: 24 }} loading={loading}>
        <Row gutter={64}>
          <Col span={8}>
            <CardSecondLevel title="设备接入(在线/总数)" />
            <Form {...INFO_FORM_LAYOUT}>
              {devicesAccess.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
            </Form>
          </Col>
          <Col span={8}>
            <CardSecondLevel title="端→云" />
            <Form {...INFO_FORM_LAYOUT}>
              {localToClouds.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
            </Form>
          </Col>
          <Col span={8}>
            <CardSecondLevel title="区县级云" />
            <Form {...INFO_FORM_LAYOUT}>
              {clouds.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
            </Form>
          </Col>
        </Row>
      </DataCard>
    </>
  );
};

export default SubPlatform;
